<template>
	<view class="content">
		<view class="top">
			<uni-icons @click="toIndexPage" type="closeempty"></uni-icons>
		</view>
		<view class="bottom">
			<view>
				<text>账号登录</text>
				<view class="login-form">
					<view>
						<view class="title">账号:</view>
						<input class="uni-input" name="username" v-model="loginData.username"/>
					</view>
					<view>
						<view class="title">密码:</view>
						<input class="uni-input" type="safe-password" name="password" v-model="loginData.password"/>
					</view>
				</view>
			</view>
			
			<view>
				<view>
					<button @click="login" :loading="loading">登录</button>
					<button type="default" @click="reset">重置</button>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginData: {
					username: '',
					password: ''
				},
				loading: false
			}
		},
		onLoad() {

		},
		methods: {
			toIndexPage() {
				uni.navigateBack()
			},
			reset() {
				this.loginData.username = ''
				this.loginData.password = ''
			},
			login() {
				// 1. 参数校验
				if (!this.loginData.username || !this.loginData.password) {
					uni.showToast({
						title: '请填写账号或密码！',
						icon:'error'
					})
					return
				}
				let usernameReg = /\d{8,11}/
				if (!usernameReg.test(this.loginData.username)) {
					uni.showToast({
						title: '账号长度为8 ~ 11的数字！',
						icon:'error'
					})
					return
				}
				let passwordReg = /((\d+[a-zA-Z]+)|([a-zA-Z]+\d+))+/
				if (!passwordReg.test(this.loginData.password) || this.loginData.password.length < 8 || this.loginData.password.length > 30) {
					uni.showToast({
						title: '密码长度为8 ~ 30的数字和字母组合！',
						icon:'error'
					})
					return
				}
				// 2. 登录操作
				this.loading = true
				this.$http('/security/login','post',this.loginData).then(
					success => {
						this.loading = false
						if (success.code === 200) {
							// 存储token
							uni.setStorageSync('token',success.data)
							// 获取登录用户信息并保存
							this.$http('/security/obtainLoginUserInfo','get').then(
								succ => {
									if (succ.code === 200) {
										// 存储登录用户信息
										uni.setStorageSync('login-user-info',JSON.stringify(succ.data))
										// 重定向到主页，tabbar只能使用switchTab跳转
										uni.switchTab({
											url:'/pages/tabbar/message/message'
										})
									}
								}
							)
						}
					},
					error => {
						this.loading = false
					}
				)
				
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
	}
	.top {
		padding: 20px 15px;
		flex: 1;
	}
	.bottom {
		flex: 9;
		display: flex;
		flex-direction: column;
		& > view:nth-child(1) {
			flex: 7;
			& > text {
				display: block;
				text-align: center;
				font-size: 20px;
			}
			& > .login-form {
				padding: 30px 20px;
				& > view {
					display: flex;
					padding: 15px 0;
					border-bottom: 1px solid gray;
					& > .title {
						font-size: 16px;
						padding: 0 8px;
					}
					& > .uni-input {
						letter-spacing: 2px;
					}
				}
			}
		}
		& > view:nth-child(2) {
			flex: 3;
			& > view:nth-child(1) {
				display: flex;
				& > button {
					width: 100px;
				}
				& > button:nth-child(1) {
					background-color: $basic-bg-color1;
				}
			}
		}
	}
</style>